<!DOCTYPE html>
<html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title><?php echo $title; ?></title>

<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content="<?php echo $keywords; ?>" />
<?php } ?>
<?php if ($icon) { ?>
<link href="<?php echo $icon; ?>" rel="icon" />
<?php } ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/kidworldweb/stylesheet/default-style.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/kidworldweb/stylesheet/foundation.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/kidworldweb/stylesheet/kkw-style.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/kidworldweb/stylesheet/normalize.css" />

<script src="catalog/view/theme/kidworldweb/js/modernizr.foundation.js"></script>
  <script>
	
  document.write('<script src=' +
  ('__proto__' in {} ? 'catalog/view/theme/kidworldweb/js/zepto' : 'catalog/view/theme/kidworldweb/js/jquery') +
  '.js><\/script>')
  </script>
	<script src="catalog/view/theme/kidworldweb/js/jquery.js"></script>
	<script>
		$.noConflict();
	</script>

<?php if ($stores) { ?>
<script type="text/javascript"><!--
$(document).ready(function() {
<?php foreach ($stores as $store) { ?>
$('body').prepend('<iframe src="<?php echo $store; ?>" style="display: none;"></iframe>');
<?php } ?>
});
//--></script>
<?php } ?>
<?php echo $google_analytics; ?>
</head>
<body>

  <div id="header" class="row">
		<div class="large-5 columns">
			<?php if ($logo) { ?>
					<div id="logo">
						<a href="<?php echo $home; ?>">
							<img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>">
						</a>
					</div>
			<?php } ?>
		</div>
		<div class="large-6 large-offset-1 columns" align="right">
			<div id="account">
					<a href="<?php echo $account; ?>"><?php echo $text_account; ?></a>
					<a id="cart" href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?><img id="carticon" src="catalog/view/theme/kidworldweb/image/data/cart.png"/></a>
			</div>
		</div>
		<div id="searchbox" class="hide-for-small">
			<input type="text" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>"/>
		</div>
	</div>
  <div class="row hide-for-small">
		<div id="menu">
			<ul>
				<li>
					<a href="<?php echo $base; ?>">
						<img id="homelogo" src="catalog/view/theme/kidworldweb/image/data/home.png"/>
					</a>
				</li>
				<?php $count = 0; ?>
				<?php foreach ($categories as $category) { ?>
				<?php $count++; ?>
				<li>
					<a href="<?php echo $category['href']; ?>" class="menu-<?php echo $count; ?>"><?php echo $category['name']; ?></a>
					<?php if($count < count($categories)) { ?>
						<span>/</span>
					<?php } ?>
				</li>
				<?php } ?>
			</ul>
		</div>
	</div>
	
	<div class="row show-for-small" id="alt-menu">
		<table width="100%">
			<tr>
			<td>
				<div id="menu-navigator">
					<?php echo $text_home; ?>
				</div>
			</td>
			<td width="150px">
				<input id="searchbox" type="text" placeholder="<?php echo $text_search; ?>"  value="<?php echo $search; ?>"/>
			</td>
			</tr>
		</table>
		<div id="roll-menu">
			<ul>
				<li>
					<a href="<?php echo $home; ?>" style="color:#64bc7f"><?php echo $text_home; ?></a>
				</li>
				<?php $count = 0; ?>
				<?php foreach ($categories as $category) { ?>
				<?php $count++; ?>
				<li>
					<a href="<?php echo $category['href']; ?>" class="menu-<?php echo $count; ?>"><?php echo $category['name']; ?></a>
				</li>
				<?php } ?>
			</ul>
		</div>
	</div>
	<script> <!-- for alt-menu -->
		$(document).ready(function() {
			$('#menu-navigator').click(function() {
				if ($('#roll-menu').css('display') == 'none') {
					openRollMenu();
				} else {
					closeRollMenu();
				}
			});
			$('#roll-menu a').click(function() {
				closeRollMenu();
			});
			function openRollMenu() {
				$('#roll-menu').fadeIn();
			}
			function closeRollMenu() {
				$('#roll-menu').fadeOut();
			}

			$('#searchbox input').keydown(function(e) {
				if (e.keyCode == 13) {
					url = 'index.php?route=product/search';
					var search = $('#searchbox input').attr('value');
					if (search) {
						url += '&search=' + encodeURIComponent(search);
					}
					var category_id = $('#content select[name=\'category_id\']').attr('value');
					if (category_id > 0) {
						url += '&category_id=' + encodeURIComponent(category_id);
					}
					var sub_category = $('#content input[name=\'sub_category\']:checked').attr('value');
					if (sub_category) {
						url += '&sub_category=true';
					}
					var filter_description = $('#content input[name=\'description\']:checked').attr('value');
					if (filter_description) {
						url += '&description=true';
					}
					location = url;
				}
			});

		});
	</script>